<template>
  <div v-if="taskInstanceList.length">
    <div class="name">最新任务</div>
    <div class="taskList">
      <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
        <swiper-slide v-for="item in taskInstanceList" :key="item.id">
          <div class="task-item" :class="{'is-active':item.state !=='SUCCESS'}">
            <div class="home-card">
              <div class="title">{{item.name}}</div>
              <div class="companyInfo">
                <div class="company">
                  <div class="tag"></div>
                  {{item.sponsor||'长沙超算中心'}}

                </div>
                <div class="company">
                  <div class="tag"></div>
                  {{item.synergism||'证通云谷数据中心'}}
                </div>
              </div>
              <div class="task-status">
                <div class="times">{{item.startTime|duration(item.endTime)}}</div>
                <div class="status">{{item.state ==='SUCCESS' ? '已结束' : '算力调度中'}}</div>
              </div>
            </div>
          </div>
        </swiper-slide>

      </swiper>
      <div class="swiper-button-prev" slot="button-prev">
        <img src="@/images/bt_left.svg" alt="">
      </div>
      <div class="swiper-button-next" slot="button-next">
        <img src="@/images/bt_right.svg" alt="">
      </div>
      <!-- <div class="task-item" v-for="item in 5" :key="item">
        <Card class="home-card">
          <div class="title">应急交通调度</div>
          <div class="companyInfo">
            <div class="company">
              <span class="tag">发起</span>
              长沙超算中心
            </div>
            <div class="company">
              <span class="tag">协调</span>
              证通云谷数据中心
            </div>
          </div>
          <div class="task-status">
            <div class="times">00:09:21</div>
            <div class="status">已结束</div>
          </div>
        </Card>
      </div> -->
    </div>
  </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  import { mapActions } from 'vuex'
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data () {
      return {
        taskInstanceList: [],
        swiperOption: {
          loop: false, // 是否循环轮播
          autoplay: true, // 是否可以自动轮播
          slidesPerView: 6, // 可是区域内可展示多少个块
          spaceBetween: 10, // 块之间间隔距离
          initialSlide: 0, // 默认初始显示块
          freeMode: false,
          // 显示分页
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          // 设置点击箭头
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    created () {
      this._getList()
    },
    methods: {
      ...mapActions('scheduler', ['getTaskInstanceList']),
      _getList () {
        let searchParams = {
          pageNo: 1,
          pageSize: 10
        }
        this.getTaskInstanceList(searchParams).then(res => {
          this.taskInstanceList = []
          this.taskInstanceList = res.totalList
          this.total = res.total
          this.isLoading = false
        }).catch(e => {
          this.isLoading = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.name {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 600;
    color: #333333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    img {
        margin-right: 5px;
    }
}
.home-card {
    // width: 170px;
    padding: 10px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.taskList {
    display: flex;
    position: relative;
    height: 180px;
    .title {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
        margin-bottom: 10px;
        color: #999999;
    }
    .is-active {
        .title {
            color: #33317e;
        }
    }
    .companyInfo {
        padding: 10px 5px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
    .company {
        display: flex;
        align-items: center;
        color: #999999;
        font-size: 12px;
        white-space: nowrap;
        .tag {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #999999;
            transform: scale(0.8);
            position: relative;
            white-space: nowrap;
            margin-right: 5px;
        }
    }
    .company + .company {
        margin-top: 5px;
    }
    .is-active {
        .companyInfo {
            background: linear-gradient(180deg, #33317e, #45116d 100%);
        }
        .company {
            color: #ffffff;
            .tag {
                background: #ffffff;
                &::before {
                    position: absolute;
                    content: ' ';
                    left: 5px;
                    top: -10px;
                    width: 2px;
                    height: 10px;
                    background: #ffffff;
                }
                &::after {
                    position: absolute;
                    content: ' ';
                    left: 5px;
                    bottom: -10px;
                    width: 2px;
                    height: 10px;
                    background: #ffffff;
                }
            }
            &:not(:first-child) {
                .tag::after {
                    display: none;
                }
            }
            &:not(:last-child) {
                .tag::before {
                    display: none;
                }
            }
        }
    }

    .task-status {
        margin-top: 10px;
        text-align: center;
        .times {
            font-size: 14px;
            font-family: Oxanium, Oxanium-Bold;
            font-weight: 700;
            color: #999999;
        }
        .status {
            margin: 0 auto;
            width: 80px;
            height: 20px;
            line-height: 20px;
            background: #999999;
            border-radius: 15px;
            box-shadow: 2px 2px 2px 0px rgba(255, 255, 255, 0.25);
            font-size: 12px;
            color: #ffffff;
        }
    }
    .is-active {
        .times {
            color: #f27011;
        }
        .status {
            background: linear-gradient(92deg, #f27011 0%, #ffa361 100%);
            border-radius: 15px;
        }
    }
}

.swiper-container {
    position: relative;
    width: 100%;
}
.swiper-container .swiper-slide {
    width: 100%;
    text-align: center;
}
.swiper-button-disabled {
    display: none;
}
.swiper-button-prev,
.swiper-button-next {
    width: 60px;
    text-align: center;
    justify-content: right;
    display: flex;
    align-items: center;
    height: 160px;
    top: 22px;
    z-index: 9999;
}
.swiper-button-prev {
    left: 0px;
    justify-content: left;
    // background: transparent;
    border-radius: 8px;
    background: linear-gradient(
        -90deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5) 100%,
        rgba(255, 255, 255, 0.5) 100%,
        rgba(255, 255, 255, 0) 100%
    );
}
.swiper-button-next {
    right: 0px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5) 100%,
        rgba(255, 255, 255, 0.5) 100%,
        rgba(255, 255, 255, 0) 100%
    );
}
</style>
